<template>
  <div>
    <span style="font-size:35px;font-weight:600;">修改首页轮播图(点击移除)</span>
    <div class="imgItem">
      <div v-for="(item,index) in swiperList" :key="index">
        <el-image class="img" fit="cover" :src="item.url" title="点击移除" @click="deleteimg(index)">
        </el-image>
        <!-- <el-form>
          <el-form-item label="输入图片标题">
            <el-input v-model="item.name" class="ipt">
            </el-input>
          </el-form-item>
        </el-form> -->
      </div>
    </div>
    <el-upload action="#" list-type="picture-card" :show-file-list='false' :auto-upload="false" :on-change="changefile">
      <i slot="default" class="el-icon-plus">选择</i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'Swiper',
  data () {
    return {
      swiperList: [
        {
          'index': 1,
          'url': 'https://minedates.oss-cn-hangzhou.aliyuncs.com/station/bg/04.jpg'
        }, {
          'index': 2,
          'url': 'https://minedates.oss-cn-hangzhou.aliyuncs.com/station/bg/06.jpg'
        }, {
          'index': 3,
          'url': 'https://minedates.oss-cn-hangzhou.aliyuncs.com/station/bg/08.jpg'
        }, {
          'index': 4,
          'url': 'https://minedates.oss-cn-hangzhou.aliyuncs.com/station/bg/07.jpg'
        }, {
          'index': 5,
          'url': 'https://minedates.oss-cn-hangzhou.aliyuncs.com/station/bg/05.jpg'
        }],
      imgList: []
    }
  },
  methods: {
    changefile (file, fileList) {
      this.imgList = fileList
      var newItem = {}
      newItem = { index: file.uid, url: file.url }
      this.swiperList.push(newItem)
      console.log(this.swiperList)
    },
    deleteimg (index) {
      this.swiperList.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.imgItem {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 25px 0;
}
.img {
  width: 450px;
  height: 300px;
  margin: 25px 0;
  border-radius: 5px;
}
.ipt {
  width: 350px;
}
</style>
